<template>
  <div>
    <form-preview header-label="付款金额" header-value="¥0.01" :body-items="list" :footer-buttons="buttons"></form-preview>
  </div>
</template>

<script>
  import {FormPreview} from 'vux'

  export default {
    name: "payMoney",
    components: {
      FormPreview
    },
    data() {
      return {
        list: [{
          label: '人工费',
          value: '100'
        }, {
          label: '材料费',
          value: '500'
        }, {
          label: '服务费',
          value: '20'
        }, {
          label: '使用红包',
          value: '3000'
        }
        ],
        buttons: [
          {
            style: 'default',
            text: '我再想想'
          }, {
            style: 'primary',
            text: "确定支付",
            onButtonClick: this.pay
          }
        ]
      }
    },
    methods: {
      pay() {
        this.$http.post("/work/api/workorder/pay/test").then(res => {
          let orderId = res.data.data
          this.$register(["chooseWXPay"]).then(() => {
            this.$http.get("/wechat/pay/?order=" + orderId).then(res => {
              let config = res.data.data
              this.$wechat.chooseWXPay({
                timestamp: config.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                timeStamp: config.timeStamp,
                nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位
                package: config.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）,
                signType: config.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: config.paySign, // 支付签名
                success: function (res) {
                  // 支付成功后的回调函数
                  alert("支付成功")
                },
                fail: function (res) {
                  alert(JSON.stringify(res))
                },
                complete: function (res) {
                  console.log(res)
                },
                cancel: function (res) {
                  //用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
                  alert("您已取消操作")
                }
              })
            })
          })
        })
      }
    }
  }
</script>
